<template>
	<view>
		<!-- <view class="search-box">
			<view class="search-location">
				<image src="../../../static/location.png" mode="" style="width: 26upx;height: 26upx;margin-right: 5upx;"></image>青岛市
			</view>
			<view class="search-input">
				<image src="../../../static/search-icon.png" mode="" style="width: 33upx;height: 33upx;margin-right: 20upx;margin-left: 20upx;"></image>
				<text style="line-height: 56upx;">输入你想购买商品名称</text>
			</view>
			<button class="cart nostyle" @click="showCartPage">
				<image src="../../../static/store/cart.png" mode="" class="cart-icon"></image>
				<view class="cart-dot" v-show="cart_number>0">
					{{cart_number}}
				</view>
			</button>
		</view> -->
		<view class="tools">
			<view class="tools-row">
				<view class="tools-item" @click="showDetail(item.id)" v-for="(item,key) in products" :key="key">
					<image :src="item.thumb" mode="widthFix" class="tools-image"></image>
				</view>
			</view>
		</view>
		<view class="recommend">
			<block v-for="(item,key) in services" :key="key">
				<view class="recommend-title" @click="showServiceDetail(item.id,'service')">
					<image :src="item.thumb" mode="widthFix" style="width: 100%;border-radius: 15upx;margin-bottom: 20upx;"></image>
				</view>
				<!-- <view class="recommend-label">
					精选服务
				</view>
				<scroll-view class="recommend-scroll" scroll-x="true">
					<view class="recommend-row">
						<view class="recommend-item" @click="showServiceDetail(service.id,'service')" v-for="(service,index) in item.services" :key="index">
							<image class="item-image" :src="service.thumb" mode="aspectFill"></image>
							<view class="item-title">
								{{service.name}}
							</view>
						</view>
					</view>
				</scroll-view> -->
	
				<!-- <view class="recommend-label">
					超值卡包
				</view> -->
				<!-- <scroll-view class="recommend-scroll" scroll-x="true">
					<view class="recommend-row">
						<view class="recommend-item" @click="showCardDetail(card.id,'card',card.store_id)" v-for="(card,index) in item.cards" :key="index">
							<image class="item-image" :src="card.thumb" mode="aspectFill"></image>
							<view class="item-title">
								{{card.name}}
							</view>
						</view>
					</view>
				</scroll-view> -->
			</block>
		</view>
		<view class="cart-button" @click="showCartPage">
			<view class="cart-dot" v-show="cart_number>0">
				{{cart_number}}
			</view>
			<image src="../../../static/store/sort-cart.png" mode="" class="cart-icon"></image>
		</view>
	</view>
</template>

<script>
	

	export default {
		data() {
			return {
				products:[],
				services:[],
				cart_number:0,
			};
		},
		onPullDownRefresh:function(){
			this.getRecommend(true);
			this.getCartNumber();
		},
		onShow:function(){
			this.getRecommend(false);
			this.getCartNumber();
		},
		methods:{
			showDetail:function(id){
				uni.navigateTo({
					url:"/pages/product/detail/detail?id="+id,
				});
			},
			getCartNumber:function(){
				var that=this;
				that.ajax("/store/cartnum/",{
					token:uni.getStorageSync("token"),
				},function(res){
					that.cart_number=res.data.data;
				});
			},
			getRecommend:function(pull){
				if(!pull){
					uni.startPullDownRefresh({})
				}
				var that=this;
				that.ajax("/store/recommend",{
				},function(res){
					uni.stopPullDownRefresh();
					that.services=res.data.data.services;
					that.products=res.data.data.products;
				});
			},
// 			showCardDetail:function(id,type,shop_id){
// 				uni.navigateTo({
// 					url:"/pages/card/detail/detail?type="+type+"&id="+id+"&shop_id="+shop_id,
// 				});
// 			},
			showServiceDetail:function(id,type,shop_id){
				if(shop_id){
					uni.navigateTo({
						url:"/pages/service/detail/detail?type="+type+"&id="+id+"&shop_id="+shop_id,
					});
				}else{
					uni.navigateTo({
						url:"/pages/service/detail/detail?type="+type+"&id="+id,
					});
				}
				
			},
// 			showSortPage:function(type){
// 				uni.navigateTo({
// 					url:"/pages/store/sort/sort?type="+type,
// 				});
// 			},
			showCartPage:function(){
				uni.navigateTo({
					url:"/pages/store/cart/cart"
				})
			}
		},
		
	}
</script>

<style>
	
	.nostyle{
		margin: 0;
		padding: 0;
		background: none;
		border:none;
	}
	.nostyle:after{
		border:none;
	}
	.search-box {
		background: #478E7E;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 24upx;
		padding: 18upx 20upx;
		color: #FAFAFA;
	}

	.search-location {
		background: rgba(255,255,255,0.58);
		border-radius: 28upx;
		padding: 10upx 28upx;
		line-height: 56upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.search-input {
		background: rgba(255,255,255,0.58);
		border-radius: 35upx;
		flex: 1;
		margin: 0 10upx;
		padding:0 12upx;
		color: #FAFAFA;
		font-size: 24upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.tools {
		padding: 15upx;
		background: #FFFFFF;
		box-shadow:0px 2px 22px 0px rgba(43,159,133,0.14);
	}
	.tools-row {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex: 3;
		flex-wrap: wrap;
	}
	.tools-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15upx;
		width: 210upx;
	}
	.tools-image {
		width: 100%;
		height: 71upx;
		border-radius: 15upx;
		box-shadow:0px 4px 24px 0px rgba(18,163,21,0.1);
	}
	
	.tools-text {
		font-size: 28upx;
		color: #4B4B4B;
		text-align: center;
		margin-top: 15upx;
	}
	.recommend{
		background: #ffffff;
		margin-top: 32upx;
	}
	.recommend-title {
		margin:0 20upx;
	}

	.recommend-scroll {
		margin: 46upx 0 20upx 0;
	}

	.recommend-row {
		display: flex;
		flex-direction: row;
		margin-bottom: 5upx;
	}

	.recommend-item {
		margin-left: 20upx;
		background:#ffffff;
		box-shadow:0upx 2upx 22upx 0upx rgba(43,159,133,0.14);
		border-radius:16upx;
		padding-bottom: 10upx;
	}
	.recommend-label {
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 30upx;
		border:1px dashed #478E7E;
		width:222upx;
		height:50upx;
		text-align: center;
		background: linear-gradient(to right, #11997E, #6ECE92);
		-webkit-background-clip: text;
		color: transparent;
		font-size: 28upx;
		line-height: 50upx;
	}
	.item-image {
		border-top-left-radius: 18upx;
		border-top-right-radius: 18upx;
		width: 480upx;
		height: 276upx;
	}

	.item-title {
		font-size: 24upx;
		color: #4B4B4B;
		line-height: 34upx;
		text-align: center;
	}
	.cart-button{
		position: fixed;
		bottom: 84upx;
		right: 0upx;
		height: 100upx;
		width: 100upx;
		background: #45AA8C;
		border-radius: 50upx;
		box-shadow:0px 7px 22px 0px rgba(51,176,139,0.58);
	}
	.cart-icon{
		width: 48upx;
		height: 40upx;
		margin-top: 30upx;
		margin-left: 26upx;
	}
	.cart-dot{
		position: absolute;
		top:-5upx;
		right: 0;
		background: #ffffff;
		border-radius: 20upx;
		font-size: 20upx;
		padding: 5upx 13upx;
		color: #FF7465;
		display: inline-block;
		border:1px solid #FF7465;
	}
</style>
